<!--  -->
<template>
  <div class="container grid">
    <div class="area1 itemBg">
      <div class="font f18 c-7c medium areaTitle">工程简介</div>
    </div>
    <div class="area2 itemBg">
      <div class="font f18 c-7c medium areaTitle">工程简介</div>
    </div>
    <div class="area3 itemBg">  
      <div class="font f18 c-7c medium areaTitle">工程简介</div>
    </div>
    <div class="area4 itemBg">
      <div class="font f18 c-7c medium areaTitle">工程简介</div>
    </div>
    <!-- <div class="area5 itemBg">
      <div class="font f18 c-7c medium areaTitle">工程简介</div>
    </div>
    <div class="area6 itemBg">
      <div class="font f18 c-7c medium areaTitle">工程简介</div>
    </div>
    <div class="area7 itemBg">
      <div class="font f18 c-7c medium areaTitle">工程简介</div>
    </div>
    <div class="area8 itemBg">
      <div class="font f18 c-7c medium areaTitle">工程简介</div>
    </div> -->
  </div>
</template>

<script >
export default {
  name: "index",
  data() {
    return {};
  },
  components: {},
};
</script>
<style scoped lang="scss">
.title {
  text-align: center;
  height: 50px;
  color: white;
  line-height: 50px;
}
.container {
  width: 100%;
  padding: 0 20px;
  height: 936px;
  box-sizing: border-box;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
  grid-template-areas:
    "area1 area2 area3"
    "area4 area4 area4"
    "area4 area4 area4";
  gap: 20px;
}
/*  */
.mainImg {
  height: calc(100% - 50px);
}
</style>